<template>
  <div class="public-views">
    <div class="public-inner">
      <!-- 游戏类型标签  -->
      <div class="game-type-list">
        <dl class="game-type-item">
          <dt>平台</dt>
          <dd v-for="item in deviceList" :class="{'game-type-activate': item.activate}" @click="selectDevice(item)">{{item.name === '' ? '不限' : item.name}}</dd>
        </dl>
        <dl class="game-type-item">
          <dt>类型</dt>
          <dd v-for="item in typeList" :class="{'game-type-activate': item.activate}" @click="selectType(item)">{{item.name === '' ? '不限' : item.name}}</dd>
        </dl>
        <dl class="game-type-item">
          <dt>标签</dt>
          <dd v-for="item in labelList" :class="{'game-type-activate': item.activate}" @click="selectLabel(item)">{{item.name === '' ? '不限' : item.name}}</dd>
        </dl>
      </div>
      <!-- 游戏内容列表  -->
      <div class="game-content-list">
        <ul class="list-wrap clearFix">
          <li :class="itemBackground(item.state)" v-for="(item, index) in GameList" v-if="index < 25">
            <router-link :to="{ path: '/details/game', query: { gameId: item.id }}">
            <!-- <router-link :to="'/details/game?gameId=' + item.id + '&gameName=' + item.name"> -->
              <img v-lazy="item.icon" alt="">
              <p>
                <span>{{item.type}}</span>
                <span>{{item.label}}</span>
              </p>
              <h3>{{item.name}}</h3>
              <h4>{{item.size}}M</h4>
            </router-link>
          </li>
        </ul>
        <div class="game-paging">
          <span @click="switchPage(1)">首页</span>
          <span @click="prePage">
            <i class="iconfont icon-zuo"></i>
          </span>
          <span class="paging-item" v-for="index in GameTotal" :class="{'paging-item-activate': currentPage === index}" @click="switchPage(index)">{{index}}</span>
          <span @click="nextPage">
            <i class="iconfont icon-gengduo"></i>
          </span>
          <span @click="switchPage(GameTotal)">尾页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前激活的页面
      currentDevice: '', // 当前选中平台
      currentType: '', // 当前选中分类
      currentLabel: '', // 当前选中标签
      deviceList: [
        { name: '', activate: true },
        { name: 'android', activate: false },
        { name: 'ios', activate: false },
        { name: 'h5', activate: false }
      ],
      typeList: [
        { name: '', activate: true },
        { name: '角色', activate: false },
        { name: '休闲', activate: false },
        { name: '竞技', activate: false },
        { name: '动作', activate: false },
        { name: '策略', activate: false },
        { name: '射击', activate: false },
        { name: '塔防', activate: false },
        { name: '养成', activate: false },
        { name: '解密', activate: false },
        { name: '格斗', activate: false },
        { name: '棋牌', activate: false },
        { name: '体育', activate: false },
        { name: '竞速', activate: false },
        { name: '冒险', activate: false },
        { name: '音乐', activate: false }
      ],
      labelList: [
        { name: '', activate: true },
        { name: '仙侠', activate: false },
        { name: '魔幻', activate: false },
        { name: '历史', activate: false },
        { name: '战争', activate: false },
        { name: '科幻', activate: false },
        { name: '动漫', activate: false }
      ]
    }
  },
  asyncData({ store, route }) {
    return store.dispatch('fetchGameList', { device: '', type: '', label: '', page: 1, cache: true })
  },
  title() {
    return '米娱游戏_所有游戏'
  },
  computed: {
    // 游戏列表
    GameList: function() {
      return [{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"ios","type":"养成","label":"战争","size":"184","state":"1","user_number":"106974","download_number":"80169"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a7180a7b56b4.png","name":"金庸侠客行","link":"javascript:;","device":"android","type":"冒险","label":"魔幻","size":"31","state":"2","user_number":"104910","download_number":"52495"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"h5","type":"动作","label":"动漫","size":"156","state":"2","user_number":"96597","download_number":"81152"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201711/5a041eabcfb82.png","name":"决战沙城","link":"javascript:;","device":"android","type":"竞技","label":"仙侠","size":"194","state":"0","user_number":"41397","download_number":"57435"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201704/58e75501468ed.png","name":"妖怪宝可萌","link":"javascript:;","device":"ios","type":"解密","label":"动漫","size":"43","state":"3","user_number":"40176","download_number":"90269"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201806/5b2329e6e437f.png","name":"时光幻境","link":"javascript:;","device":"android","type":"冒险","label":"动漫","size":"185","state":"2","user_number":"51847","download_number":"98074"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201707/596ead5533c53.gif","name":"独步武林","link":"javascript:;","device":"h5","type":"动作","label":"魔幻","size":"103","state":"2","user_number":"54492","download_number":"12312"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201807/5b3b171552933.png","name":"不朽之城","link":"javascript:;","device":"ios","type":"格斗","label":"科幻","size":"190","state":"1","user_number":"83820","download_number":"45559"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/588067e4c8071.png","name":"传奇世界","link":"javascript:;","device":"android","type":"策略","label":"仙侠","size":"19","state":"0","user_number":"107750","download_number":"105950"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201807/5b42f25a6b92c.png","name":"绯雨骑士团","link":"javascript:;","device":"android","type":"塔防","label":"战争","size":"65","state":"2","user_number":"68497","download_number":"69898"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201805/5b0e2976475a4.png","name":"凡人飞仙传","link":"javascript:;","device":"h5","type":"动作","label":"战争","size":"124","state":"0","user_number":"64544","download_number":"31813"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201806/5b1dd04d71984.png","name":"传奇荣耀","link":"javascript:;","device":"ios","type":"动作","label":"历史","size":"207","state":"1","user_number":"33846","download_number":"31010"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201806/5b18d848098be.png","name":"守卫主公","link":"javascript:;","device":"android","type":" 体育","label":"仙侠","size":"148","state":"1","user_number":"76297","download_number":"94405"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201708/59963f0664a93.png","name":"口袋之旅H5","link":"javascript:;","device":"h5","type":"角色","label":"历史","size":"66","state":"2","user_number":"58308","download_number":"66192"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201806/5b1f289f00a4a.png","name":"大天使之剑h5","link":"javascript:;","device":"h5","type":"动作","label":"仙侠","size":"44","state":"0","user_number":"94103","download_number":"93124"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201804/5adfeba189e42.png","name":"小小首富","link":"javascript:;","device":"ios","type":"棋牌","label":"仙侠","size":"77","state":"0","user_number":"15108","download_number":"34225"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/5880647710bd7.png","name":"大富豪3","link":"javascript:;","device":"ios","type":"音乐","label":"仙侠","size":"60","state":"1","user_number":"54075","download_number":"41221"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201807/5b3f0f3f6e7c5.png","name":"飞仙诀H5","link":"javascript:;","device":"android","type":"音乐","label":"科幻","size":"197","state":"3","user_number":"52615","download_number":"81499"}]
    },
    // 游戏总数
    GameTotal: function() {
      return Math.ceil(this.$store.state.GameTotal / 25)
    }
  },
  methods: {
    // 渲染背景
    itemBackground(state) {
      const i = parseInt(state)
      if (i === 1) return 'sole'
      if (i === 2) return 'hot'
    },
    // 切换页面
    switchPage(index) {
      if (index === this.currentPage) {
        return false
      }
      this.currentPage = index
      console.log(' >> 当前分页索引：', this.currentPage)
      this.$store.dispatch('fetchGameList', { device: this.currentDevice, type: this.currentType, label: this.currentLabel, page: this.currentPage, cache: true })
    },
    // 上一页
    prePage() {
      if (this.currentPage > 1) {
        this.currentPage--
        console.log(' >> 当前分页索引：', this.currentPage)
        this.$store.dispatch('fetchGameList', { device: this.currentDevice, type: this.currentType, label: this.currentLabel, page: this.currentPage, cache: true })
      } else {
        return false
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.GameTotal) {
        this.currentPage++
        console.log(' >> 当前分页索引：', this.currentPage)
        this.$store.dispatch('fetchGameList', { device: this.currentDevice, type: this.currentType, label: this.currentLabel, page: this.currentPage, cache: true })
      } else {
        return false
      }
    },
    // 选择平台
    selectDevice(item) {
      this.deviceList.map(v => v.activate = false)
      item.activate = true
      this.currentDevice = item.name
      console.log(' >> 当前选中平台：', this.currentDevice)
      this.$store.dispatch('fetchGameList', { device: this.currentDevice, type: this.currentType, label: this.currentLabel, page: this.currentPage, cache: true })
    },
    selectType(item) {
      this.typeList.map(v => v.activate = false)
      item.activate = true
      this.currentType = item.name
      console.log(' >> 当前选中类型：', this.currentType)
      this.$store.dispatch('fetchGameList', { device: this.currentDevice, type: this.currentType, label: this.currentLabel, page: this.currentPage, cache: true })
    },
    selectLabel(item) {
      this.labelList.map(v => v.activate = false)
      item.activate = true
      this.currentLabel = item.name
      console.log(' >> 当前选中标签：', this.currentLabel)
      this.$store.dispatch('fetchGameList', { device: this.currentDevice, type: this.currentType, label: this.currentLabel, page: this.currentPage, cache: true })
    }
  }
}
</script>

<style lang="less" scoped>
// 游戏类型标签
.game-type-list {
  padding: 40px 25px 1px 45px;
  background-color: #fff;
  margin-bottom: 40px;
  box-shadow: 5px 5px 10px 1px #ededed;
  .game-type-item {
    line-height: 30px;
    margin-bottom: 20px;
    overflow: hidden;
    dt {
      font-size: 16px;
      color: #333;
      float: left;
      margin-right: 30px;
      font-weight: 600;
    }
    dd {
      padding: 0 14px;
      border: 1px solid #ccc;
      border-radius: 15px;
      float: left;
      margin: 0 8px 10px;
      font-size: 14px;
      color: #999;
      cursor: pointer;
      &:nth-child(2) {
        margin-right: 30px;
      }
      &:nth-child(16) {
        margin-left: 166px;
      }
      &:hover {
        text-decoration: underline;
      }
    }
    .game-type-activate {
      color: #fff;
      background-color: #ffa93a;
      border: 1px solid #ffa93a;
    }
  }
}

// 游戏内容列表
.game-content-list {
  background-color: #fff;
  padding: 50px;
  overflow: hidden;
  .list-wrap {
    li {
      float: left;
      width: 188px;
      text-align: center;
      border: 1px solid #eee;
      border-radius: 20px;
      margin-right: 36px;
      margin-bottom: 40px;
      position: relative;
      &:hover {
        border: 1px solid #ffa93a;
      }
      img {
        width: 150px;
        height: 150px;
        border-radius: 20px;
        display: block;
        margin: 20px auto 10px;
      }
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 30px;
        span {
          padding: 4px 10px;
          border-radius: 15px;
          margin: 0 6px;
          font-size: 14px;
          &:nth-child(1) {
            border: 1px solid #ffa93a;
            color: #ffa93a;
          }
          &:nth-child(2) {
            border: 1px solid #2cd0ff;
            color: #2cd0ff;
          }
        }
      }
      h3 {
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
      }
      h4 {
        margin-bottom: 20px;
        color: #ffa93a;
      }
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
    .sole {
      border: 1px solid #7056f2;
      &:before {
        content: '';
        width: 60px;
        height: 60px;
        background: url('../../assets/icon/game_sole_icon.png') no-repeat;
        background-size: 100%;
        position: absolute;
        left: -8px;
        top: -8px;
      }
    }
    .hot {
      border: 1px solid #ff6a29;
      &:before {
        content: '';
        width: 60px;
        height: 60px;
        background: url('../../assets/icon/game_hot_icon.png') no-repeat;
        background-size: 100%;
        position: absolute;
        left: -8px;
        top: -8px;
      }
    }
  }
  .game-paging {
    text-align: right;
    line-height: 30px;
    padding: 10px 5px;
    span {
      width: 30px;
      height: 30px;
      font-size: 12px;
      display: inline-block;
      text-align: center;
      border: 1px solid #ffa93a;
      color: #ffa93a;
      margin: 0 5px;
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      vertical-align: middle;
    }
    i {
      font-size: 18px;
      position: absolute;
      left: 8px;
      top: 0;
    }
    .icon-gengduo {
      left: 2px;
    }
    .paging-item {
      color: #ccc;
      border: 1px solid #eee;
    }
    .paging-item-activate {
      color: #fff;
      background-color: #ffa93a;
      border: 1px solid #ffa93a;
    }
  }
}
</style>

